<template>
  <div class="reject_dialog">
    <van-dialog v-model="showDialog" @confirm="confirmReject" show-cancel-button>
      <div class="title">未解决原因</div>
      <div class="content_wrapper van-hairline--surround">
        <van-field
          v-model="postModel.content"
          rows="4"
          autosize
          type="textarea"
         
          placeholder="请输入未解决原因，我们将为您重新处理！"
          show-word-limit
        />
      </div>

      <!-- 下边框 -->
      <!-- <div class="van-hairline--bottom"></div> -->
      <!-- 图片上传区域 -->
      <div class="uploader_container">
        <van-uploader
          :after-read="afterRead"
          :before-delete="beforeDelete"
          @oversize="onOversize"
          :max-size="5 * 1024 * 1024"
          max-count="3"
          v-model="fileList"
          upload-text="（最多三张）"
        />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { rejectWorkOrder } from "@/api/comment";
import { uploadFile, deleteUploadFileByFileId } from "@/api/base";
export default {
  name: "RejectDialog",
  props: {
    visiable: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    visiable: {
      handler(val) {
        this.showDialog = val;
      },
      immediate: true
    },
    showDialog: {
      handler(val) {
        this.$emit("update:visiable", val);
      }
    }
  },
  data() {
    return {
      showDialog: false,
      fileList: [],
      imgList: [],
      uploadData: {
        files: null,
        createGroupId: true,
        nsSystemFiles: null
      },
      postModel: {
        content: "",
        fileGroupId: ""
      }
    };
  },
  methods: {
    confirmReject() {
      rejectWorkOrder(this.postModel).then(() => {
        
        this.showDialog = false;
        this.$toast.success("驳回成功");
        this.$emit("resetFetch");
      });
    },
    afterRead(file) {
      console.log("afterRead -> file", file);
      // this.postModel.fileGroupId =
      const trueFile = file.file;
      this.uploadData.files = trueFile;
      this.uploadData.createGroupId =
        this.postModel.fileGroupId.length > 0 ? false : true;
      // 这里为了区别第一次和第零次上传
      this.uploadData.nsSystemFiles = JSON.stringify([
        this.uploadData.createGroupId
          ? {
              fileName: trueFile.name
            }
          : {
              fileName: trueFile.name,
              groupId: this.postModel.fileGroupId
            }
      ]);
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true
      });
      const formData = new FormData();
      // formData.append("files", trueFile);
      formData.append("files", this.uploadData.files);
      formData.append("createGroupId", this.uploadData.createGroupId);
      formData.append("nsSystemFiles", this.uploadData.nsSystemFiles);
      uploadFile(formData)
        .then(res => {
          // console.log("afterRead -> res", res);
          this.postModel.fileGroupId = res[0].groupId;
          this.imgList.push({
            url: res[0].fileFullPath,
            fileId: res[0].fileId
          });
        })
        .finally(() => {
          this.$toast.clear();
        });

      // .fially(this.$toast.clear());
    },
    beforeDelete(file, detail) {
      // console.log("beforeDelete -> file, detail", file, detail)
      deleteUploadFileByFileId({
        fileId: this.imgList[detail.index].fileId
      })
        .then(() => {
          // this
          this.imgList.splice(detail.index, 1);
          this.fileList.splice(detail.index, 1);
          this.$toast.success("删除成功");
          return true;
        })
        .catch(() => {
          return false;
        });
    },
    onOversize() {
      this.$toast.fail("图片过大");
    }
  }
};
</script>

<style lang="less" scoped>
.reject_dialog {
  display: flex;
  flex-flow: column;
  .title {
    padding: 10px 15px;
    padding-top: 20px;
    padding-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
  }
  .content_wrapper {
    width: 90%;
    margin: 0 auto;
  }
}
.uploader_container {
  width: 90%;
  margin: 10px auto;
}
</style>